<template>

    <li class="message-list">
        <div class="message-text">
            <div>{{item.content}}</div>
            <div class="message-date">{{item.createdAt | timeFormat}}</div>
        </div>
        <div class="message-option" v-if="item.status === 0">
            <div class="read-message" @click.stop="read">标记为已读</div>
            <g-button class="message-btn" type="primary" :loading="waiting" @click.stop="confirm" v-show="item.type === 'group-invitation'">接受</g-button>
        </div>
    </li>
    
</template>

<script>

import GButton from '@/components/common/g-button'
import {group as groupAPI} from '@/api'

export default {
    name: 'message-list',
    props: {
        item: Object,
        index: Number
    },
    data () {
        return {
            waiting: false
        }
    },
    watch: {
       
    },
    computed: {
        
    },
    filters: {
        timeFormat: (value) => {
            var date = new Date(value);
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        }
    },
    methods: {

        read () {
            this.$emit('read-message', this.item, this.index);
        },

        async confirm () {

            let params = JSON.parse(this.item.params);
            let uid = params.invitationUid;
            this.waiting = true;

            let result = await groupAPI.reply(uid, {accept: true});

            if (result.data.code != 0) {
                this.$message.error('操作失败');
                this.waiting = false;
                return;
            }

            this.read();
        }
    },
    components: {
        GButton,
    }
}
</script>

<style lang="scss">

@import 'common';

.message-list {

    width: 100%;
    padding: 16px 8px;
    // height: 56px;
    border-bottom: 1px solid $bdGray;
    position: relative;

    &:hover{
        background-color: #f3f3f3;

        .message-option {
            display: block !important;
            text-align: right;
        }
    }

    .message-text {
        padding-right: 26%;

        .message-date {
            color: $lightGray;
            font-size: 12px;
        }
    }

    .message-option {
        position: absolute;
        display: none;
        top: 0;
        right: 0;
        width: 20%;
        height: 100%;
        padding: 4px 24px 4px 0;

        .read-message {
            font-size: 12px;
            cursor: pointer;
            margin-bottom: 6px;
            color: $lightGray;

            &:hover {
                color: $primary;
            }
        }

        .message-btn {
            height: 18px;
            line-height: 16px;
        }
    }
    
}
</style>
